<template>
    <!--新闻块-->
    <div class="ce_news">
        <div class="container">
            <div class="row">
                <!--自定义向右偏移：col-md-offset-2
                设置md，width:992-1200 中等屏幕 桌面显示器 md
                视口<992，则bootstrap默认占12位栅格
                -->
                <div class="col-md-3 col-md-offset-1">
                    <h3 class="newsTitle">亚盟新闻中心</h3>
                </div>
                <div class="col-md-1 news_nav">
                    <!-- 新闻连接线 -->
                    <div class="newsLine hidden-xs hidden-sm"></div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
                                <span class="ce_icon ce_icon_new01"></span>
                            </a></li>
                        <li role="presentation">
                            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
                                <span class="ce_icon ce_icon_new02"></span>
                            </a></li>
                        <li role="presentation">
                            <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
                                <span class="ce_icon ce_icon_E904"></span>
                            </a></li>
                        <li role="presentation">
                            <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
                                <span class="ce_icon ce_icon_new04"></span>
                            </a></li>
                    </ul>
                </div>
                <div class="col-md-7 news_content">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <ul class="ce_newsList">
                                <li v-for="(item,index) in articleActive" :key="index">
                                    <a href="" @click="inDetail(item)" class="timeA">
                                        <span class="createTime hidden-xs">{{item.createTime}}</span>{{item.name}}
                                    </a>
                                </li>

                            </ul>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                            <ul class="ce_newsList">
                                <li v-for="(item,index) in articleFunction" :key="index">
                                    <a href="" @click="inDetail(item)" class="timeA">
                                        <span class="createTime hidden-xs">{{item.createTime}}</span>{{item.name}}
                                    </a>
                                </li>

                            </ul>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="messages">
                            <ul class="ce_newsList">
                                <li v-for="(item,index) in articleProduct" :key="index">
                                    <a href="" @click="inDetail(item)" class="timeA">
                                        <span class="createTime hidden-xs">{{item.createTime}}</span>{{item.name}}
                                    </a>
                                </li>

                            </ul>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="settings">
                            <ul class="ce_newsList">
                                <li v-for="(item,index) in articleHealthy" :key="index">
                                    <a href="" @click="inDetail(item)" class="timeA">
                                        <span class="createTime hidden-xs">{{item.createTime}}</span>{{item.name}}
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "MainNews",
        data() {
            return {
                message: "首页新闻展示",
                articles: [],
                article: [],
                ARTICLE_TYPE: ARTICLE_TYPE,
                articleActive: [],
                articleFunction: [],
                articleProduct: [],
                articleIndustry: [],
                articleHealthy: [],
                createTime:{},
            }
        },
        mounted() {
            this.getClientSize();
            this.getIndexArticle();
        },
        watch: {},
        methods: {
            /*获取用户视口*/
            getClientSize() {
                $(window).on("resize", function () {
                    let lia = document.querySelectorAll(".ce_news .news_nav .nav-tabs li a");
                    let lis = document.querySelectorAll(".ce_news .news_nav .nav-tabs li");
                    let lisLast = document.querySelectorAll(".ce_news .news_nav .nav-tabs li:last-of-type");
                    //获取当前视口宽度
                    let currentWidth = $(window).width();
                    if (currentWidth < 992 && currentWidth >= 768) {
                        for (let i = 0; i < lia.length; i++) {
                            lia[i].style = "margin:20px 30px";
                        }
                    }
                    if (currentWidth < 768) {
                        for (let i = 0; i < lis.length; i++) {
                            lis[i].style = "margin:20px 0;width:25%";
                        }
                    }
                    /*if(currentWidth>=992){
                        console.log("移动端视口sx");
                        for (let i=0;i<lis.length;i++){
                            lis[i].style="margin-bottom: 60px;";
                            lisLast.style="margin-bottom:0;";
                        }
                    }*/
                }).trigger("resize");
            },
            getIndexArticle() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/article/index/list').then((response) => {
                    setTimeout(function () {
                        loading.close();
                    }, 300);
                    let resp = response.data;
                    if (resp.success) {
                        this.articles = resp.responseData;
                        for (let i = 0; i < this.articles.length; i++) {

                            if (this.articles[i].typeId === ARTICLE_TYPE.ARTICLE_ACTIVE.key) {
                                this.articles[i].createTime = this.articles[i].createTime.substring(0, 10);
                                this.articleActive.push(this.articles[i]);
                            } else if (this.articles[i].typeId === ARTICLE_TYPE.ARTICLE_FUNCTION.key) {
                                this.articles[i].createTime = this.articles[i].createTime.substring(0, 10);
                                this.articleFunction.push(this.articles[i]);
                            } else if (this.articles[i].typeId === ARTICLE_TYPE.ARTICLE_PRODUCT.key) {
                                this.articles[i].createTime = this.articles[i].createTime.substring(0, 10);
                                this.articleProduct.push(this.articles[i]);
                            } else if (this.articles[i].typeId === ARTICLE_TYPE.ARTICLE_INDUSTRY.key) {
                                this.articles[i].createTime = this.articles[i].createTime.substring(0, 10);
                                this.articleIndustry.push(this.articles[i]);
                            } else if (this.articles[i].typeId === ARTICLE_TYPE.ARTICLE_HEALTHY.key) {
                                this.articles[i].createTime = this.articles[i].createTime.substring(0, 10);
                                this.articleHealthy.push(this.articles[i]);
                            }
                        }
                    }
                })
            },
            inDetail(item) {
                let year=item.createTime.substring(0,4);
                let month=item.createTime.substring(5,7);
                let day=item.createTime.substring(8,10);
                let time=item.createTime.substring(11);
                this.createTime.year=year;
                this.createTime.month=month;
                this.createTime.day=day;
                this.createTime.time=time;
                item.createTime=this.createTime;
                SessionStorage.set(ARTICLE,item);
                this.$router.push({
                    name:"detail",
                    params:{item},
                })
            },
        },
    }
</script>

<style scoped>
    /*新闻块样式*/
    .ce_news {
        padding: 20px;
    }

    .ce_news .newsTitle {
        line-height: 50px;
        font-size: 26px;
        border-bottom: 2px solid #ccc;
        text-align: center;
        position: relative;
    }

    /*添加伪元素圆点*/
    .ce_news .newsTitle::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid #ccc;
        position: absolute;
        bottom: -6px;
        right: -10px;
    }

    /*更改垂直导航栏*/
    .ce_news .nav-tabs {
        border-bottom: none;
        position: relative;
    }

    /*添加垂直虚线*/
    /*.ce_news .nav-tabs::before{
        content: "";
        width: 1px;
        height: 100%;!*伪元素要求，父元素必须有具体宽高值，这里不可用伪类*!
        border-left: 1px dashed #e92322;
        position: absolute;
        left: 0;
        top: 0;
    }*/
    /*这里可以取消相对定位，col默认开启relative*/
    .ce_news .news_nav {
        position: relative;
    }

    .ce_news .news_nav .newsLine {
        width: 1px;
        height: 100%;
        border-left: 1px dashed #e92322;
        position: absolute;
        left: 45px;
        top: 0;
    }

    /*去掉最后一个li元素的border*/
    .ce_news .nav-tabs li:last-of-type {
        margin-bottom: 0;
    }

    .ce_news .nav-tabs li {
        margin-bottom: 60px;
    }

    .ce_news .nav-tabs li.active > a, .ce_news .nav-tabs li.active > a:hover, .ce_news .nav-tabs li.active > a:focus {
        border: none;
        background-color: #e92322;
    }

    .ce_news .nav-tabs li a {
        background-color: #ccc;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: none;
    }

    .ce_news .nav-tabs li a:hover {
        border: none;
        background-color: #e92322;
    }

    .ce_news .nav-tabs li a > .ce_icon {
        font-size: 30px;
        color: #fff;
    }

    /*使用媒体查询：768-992之间的导航li标签间距样式*/
    @media screen and(min-width: 768px) and(max-width: 992px) {
        .nav-tabs li > a {
            margin: 20px 30px;
        }
    }

    @media screen and(max-width: 768px) {
        .nav-tabs li > a {
            margin: 20px 0;
            width: 25%; /*设置宽度%*/
        }
    }

    /*新闻列表*/
    .ce_newsList {
        list-style: none;
        font-size: 15px;
    }

    .ce_newsList li {
        line-height: 60px;
    }

    .timeA {
        text-decoration: none;
    }

    .createTime {
        margin-right: 10px;
        color: #e9a722;

    }
</style>